<template>
	<div class="decorate-topMenu" :style="styleObj">
      <ul class="nav-box">
        <li  :class="['nav-item'+tplItemData.style,...itemClassName]" v-for="(item, index) in navList" :key="index" :style="[{background:item.bgColor},styleObj1]">
          <a href="javascript:;" @click="openLink(item.link)">
            <img v-if="tplItemData.style==1" :src="item.pic" alt="">
            <h3 :style="{color:item.fotColor}">{{item.showtitle}}</h3>
          </a>
        </li>
      </ul>
    </div>
</template>

<script>
  /**
   * @Author: yqe@360shop.cn
   * @Date: 2020年07月08日15:11:21
   * @Last Modified by: yqe@360shop.cn
   * @Last Modified time: 2020年07月08日15:11:21
   */
  import { openPage } from '@/utils/utils'
  import Vue from 'vue'

  export default Vue.extend({
    name: 'index',
    data() {
      return {
        navList: [],
        styleObj: {},
        styleObj1: {},
        itemClassName: []
      }
    },
    props: {
      tplItemData: {
        type: Object // 传入参数的类型
      }
    },
    methods: {
      openLink(link){
        openPage(link)
      }
    },
    mounted() {
      this.navList = this.tplItemData.dataset
      this.styleObj.padding = this.tplItemData.modulePadding + 'px 0px'
      if (this.tplItemData.dataset[0].pic) {
        this.itemClassName.push('imgNav')
      } else {
        this.itemClassName.push('textNav')
      }
      if (this.tplItemData.marginstyle == '1') {
        this.styleObj1.marginRight = '1px'
      }
      // console.log(this.tplItemData)
    }
  })
</script>

<style lang="scss">
.decorate-topMenu{
  .nav-box{
    display: flex;
    li{
      flex: 1;
      align-items: center;
    }
    .nav-item0{
      overflow: hidden;
      a{
        height: 100%;
        width: 100%;
        display: block;
        text-align: center;
        h3{
          line-height: 100px;
          width: 100%;  
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    .nav-item1{
      a{
        height: 100%;
        width: 100%;
        display: block;
        text-align: center;
        img{
          margin-top: 12px;
          padding-top: 0px;
          display: inline-block;
          width: 40px;
          height: 40px;
        }
      }
      flex: 1;
      display: flex;
      text-align: center;
    }
    .imgNav{
      height: 100px;
    }
    .textNav{
      height: 88px;
      line-height: 88px;
    }
    .margin1{
      margin-right: 2px;
    }
  }
}
</style>
